<!-- TRIGGER BUTTON:
<a href="/my-ajax-page.html" data-toggle="modal" data-target="#remoteModal" class="btn btn-default">Open Modal</a> -->

<!-- MODAL PLACE HOLDER
<div class="modal fade" id="remoteModal" tabindex="-1" role="dialog" aria-labelledby="remoteModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content"></div>
    </div>
</div> -->
<!--////////////////////////////////////-->

<!--<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
        &times;
    </button>
    <h4 class="modal-title" id="myModalLabel">Command List</h4>
</div>-->
<div class="modal-body">

    <h1><i class="fa fa-microphone text-muted"></i>&nbsp;&nbsp; SmartAdmin Voice Command
    </h1>
    <hr class="simple">
    <h5>Instruction</h5>

    Click <span class="text-success">"Allow"</span> to access your microphone and activate Voice Command.
    You will notice a <span class="text-primary"><strong>BLUE</strong> Flash</span> on the microphone icon indicating activation.
    The icon will appear <span class="text-danger">
        <strong>RED</strong>
    </span> <span class="label label-danger">
        <i class="fa fa-microphone fa-lg"></i>
    </span> if you <span class="text-danger">"Deny"</span> access or don't have any microphone installed.
    <br>
    <br>
    As a security precaution, your browser will disconnect the microphone every 60 to 120 seconds (sooner if not being used). In which case Voice Command will prompt you again to <span class="text-success">"Allow"</span> or <span class="text-danger">"Deny"</span> access to your microphone.
    <br>
    <br>
    If you host your page over <strong>http<span class="text-success">s</span></strong> (secure socket layer) protocol you can wave this security measure and have an unintrupted Voice Command.
    <br>
    <br>
    <h5>Commands</h5>
    <ul>
        <li>
            <strong>'show' </strong> then say the <strong>*page*</strong> you want to go to. For example <strong>"show inbox"</strong> or <strong>"show calendar"</strong>
        </li>
        <li>
            <strong>'mute' </strong> - mutes all sound effects for the theme.
        </li>
        <li>
            <strong>'sound on'</strong> - unmutes all sound effects for the theme.
        </li>
        <li>
            <span class="text-danger">
                <strong>'stop'</strong>
            </span> - deactivates voice command.
        </li>
        <li>
            <span class="text-primary">
                <strong>'help'</strong>
            </span> - brings up the command list
        </li>
        <li>
            <span class="text-danger">
                <strong>'got it'</strong>
            </span> - closes help modal
        </li>
        <li>
            <strong>'hide navigation'</strong> - toggle navigation collapse
        </li>
        <li>
            <strong>'show navigation'</strong> - toggle navigation to open (can be used again to close)
        </li>
        <li>
            <strong>'scroll up'</strong> - scrolls to the top of the page
        </li>
        <li>
            <strong>'scroll down'</strong> - scrollts to the bottom of the page
        </li>
        <li>
            <strong>'go back' </strong> - goes back in history (history -1 click)
        </li>
        <li>
            <strong>'logout'</strong> - logs you out
        </li>
    </ul>
    <br>
    <h5>Adding your own commands</h5>
    Voice Command supports up to 80 languages. Adding your own commands is extreamly easy. All commands are stored in the <strong>app.config.js</strong> file under the <code>var commands = {...}</code>.

    <hr class="simple">
    <div class="text-right">
        <button type="button" class="btn btn-success btn-lg" data-dismiss="modal">
            Got it!
        </button>
    </div>

</div>
<!--<div class="modal-footer">
    <button type="button" class="btn btn-primary" data-dismiss="modal">Got it!</button>
</div> -->
